<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%@taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%@ taglib uri="/WEB-INF/custom-functions.tld" prefix="fn" %>

					<div class="row full-width">
                        <div class="columns">
                        <form:form method="POST" modelAttribute="userParameters" id="form-abide"
							action="${pageContext.request.contextPath}/account/profile.html">
							<!-- error div -->
								<c:if test="${not empty message}">
									<div class="row">
										<div class="large-6 large-centered medium-13  medium-centered small-14 small-centered columns margin-15px-top">
											<div data-alert class="alert-box alert radius">
												<div align="center">
													<b>${message}</b>
													<a href="#" class="close">&times;</a>
												</div>
											</div>
										</div>
									</div>
								</c:if>
								<div class="row">
									<div class="large-6 large-centered columns margin-15px-top">
										<form:errors path="*" element="div" cssClass="alert-box alert radius" id="alert"/>
									</div>
								</div>
                            <div class="large-12 medium-14 small-16 large-centered medium-centered small-centered columns">
                                <!--content-->
                                <div class="row collapse">
									<div class="large-3 columns">
										<dl class="tabs vertical" data-tab>
											<dd class="active"><a class="vertical-active-tab" href="#">MY PROFILE</a>
											</dd>
											<dd class="intive"><a class="vertical-inactive-tab" href="${pageContext.request.contextPath}/account/notification-center.html">NOTIFICATION CENTER</a>
											</dd>
										</dl>
										<br>
									</div>
									<div class="large-10 left background-secondary profile-panel columns">
											<br>
											<div class="row">
												<div class="large-3 medium-3 columns">
													<label class="profile inline">Email</label>
												</div>
												<div class="large-1 medium-1 small-2 columns">
													<input type="radio" checked name="userEmail" value="primary" />
												</div>
												<div class="large-12 medium-12 small-14 columns">
													<div class="row collapse">
														<input type="email" class="border-blue primary-email" id="primaryEmail" name="primaryEmail" value="${userParameters.primaryEmail}" readonly="readonly"/>
													</div>
												</div>
											</div>
											<c:forEach var="email"
												items="${userParameters.alreadyAddedEmailSecondary}">
												<c:choose>
													<c:when test="${fn:contains(userParameters.alreadyAddedEmailSecondaryNotActive, email)}">
														<div class="row">
															<div class="large-3 medium-3 columns">
																<label class="profile inline">     </label>
															</div>
															<!-- <div class="large-1 medium-1 small-2 columns">
																<input type="radio" name="userEmail" id="alternativeEmail" />
															</div> -->
															<div class="large-12 medium-12 small-14 columns margin-14px-bot">
														 		<div class="row collapse">
																	<div class="small-14 columns">
																		<input type="email" class="border-blue addedEmail" name="alreadyAddedEmailSecondary" value="${email}" readonly="readonly"/>
																	</div>
																	<div class="small-2 columns">
																		<a><label class="border-blue postfix delete-email-added fa fa-trash-o postfix-icon" ></label></a>
																	</div>
																</div>
															</div>
														</div>
													</c:when>
													<c:otherwise>
														<div class="row">
															<div class="large-3 medium-3 columns">
																<label class="profile inline">     </label>
															</div>
															<div class="large-1 medium-1 small-2 columns">
																<input type="radio" name="userEmail" id="alternativeEmail" />
															</div>
															<div class="large-12 medium-12 small-14 columns margin-14px-bot">
																 <div class="row collapse">
																	<div class="small-14 columns">
																		<input type="email" class="border-blue addedEmail" name="alreadyAddedEmailSecondary" value="${email}" readonly="readonly"/>
																	</div>
																	<div class="small-2 columns">
																		<a><label class="border-blue postfix delete-email-added fa fa-trash-o postfix-icon" ></label></a>
																	</div>
																</div>
															</div>
														</div>
													</c:otherwise>
												</c:choose>
											</c:forEach>
											<div class="row mark-here">
											</div>
											<div class="row">
												<div class="columns">
													<button id="add-new-button" type="button" class="button tiny right profile-add-new">Add new</button>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Old password</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="password" class="border-blue" placeholder=""
													name="currentPassword" value="${userParameters.defaultPassword}"/>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">New password</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="password" class="border-blue" id="newPassword" placeholder=""
													name="newPassword" value="${userParameters.newPassword}" />
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Confirm</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="password" class="border-blue" id="confirmPassword" name="confirmPassword"
													data-equalto="newPassword" data-invalid="" value="${userParameters.confirmPassword}"/>
													<small class="error">Passwords must match.</small>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">First name</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="text" class="border-blue" placeholder="" name="firstName" value="${userParameters.firstName}"/>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Last name</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="text" class="border-blue" placeholder="" name="lastName" value="${userParameters.lastName}"/>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Gender
														</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="radio" class="radioBtn" name="gender" value="1"
														${userParameters.gender=='1'?'checked':''}>
														<label for="genderMale" class="profile inline">Male</label>
													<input type="radio" class="radioBtn" name="gender" value="0"
														${userParameters.gender=='0'?'checked':''}>
														<label for="genderFemale" class="profile inline">Female</label>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Date of birth</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input id="dpd3" class="border-blue" type="text"
													name="dateOfBirth" data-date-format="yyyy/mm/dd" readonly
													value="${userParameters.dateOfBirth}">
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Phone number</label>
												</div>
												<div class="large-12 medium-12 columns">
													<input type="text" class="border-blue" placeholder="" name="phone" value="${userParameters.phone}"/>
												</div>
											</div>
											<div class="row">
												<div class="large-4 medium-4 columns">
													<label class="profile inline">Currency</label>
												</div>
												<div class="large-12 medium-12 columns">
													<select id="currency-list" name="currency" class="form-control" style="width: 100%;">
													</select>
												</div>
											</div>
											<input name="userId" type="hidden" value="${userParameters.userId}" />
											<div class="row">
													<div class="large-4 medium-4 columns">
													</div>
													<div class="large-12 medium-12 columns">
														<button type="submit" class="small update-profile button expand loading_controller_group" id="updatebtn">Update profile</button>
													</div>
											</div>
									</div>
                                </div>
                            </div>
                            </form:form>
                        </div>
                    </div>
					<script>
	                    $(document).ready(function () {
	                    	$("#form-abide").attr('data-abide', '');
	                    });
                    </script>